<div class="container">
    <gridster [options]="gridOptions">
        <gridster-item [item]="item" *ngFor="let item of dashboard; index as i">
            <div *ngIf="item.content" class="card-content">
                <div [ngSwitch]="item.card.type"  [style.transform]="'scale(' + item.card.zoom + ')'">
                    <div *ngSwitchCase="cardType.view">
                        <ng-container [ngSwitch]="item.content?.type">
                            <ng-container *ngSwitchCase="mapsViewType">
                                <app-maps-view [view]="item.content" [hmi]="hmi" [gaugesManager]="gaugesManager" (onGoTo)="onGoToPage($event)"></app-maps-view>
                            </ng-container>
                            <ng-container *ngSwitchDefault>
                                <app-fuxa-view class="lab-body" id="fuxaView{{i}}" [view]="item.content" [hmi]="hmi" [gaugesManager]="gaugesManager"></app-fuxa-view>
                            </ng-container>
                        </ng-container>
                    </div>
                    <div *ngSwitchCase="cardType.alarms">
                        <app-alarm-view #alarmsview [fullview]="true" [showInContainer]="true" [autostart]="true"></app-alarm-view>
                    </div>
                    <div *ngSwitchCase="cardType.iframe">
                        <div *ngIf="edit; else iframe" class="card-iframe-edit">
                            <span><b>iframe</b> {{ item.card.data }}</span>
                        </div>
                        <ng-template #iframe>
                            <app-iframe [link]="item.card.data" class="iframe-class"></app-iframe>
                        </ng-template>
                    </div>
                </div>
            </div>
            <div *ngIf="edit" class="card-tool">
                {{'card.style-zoom' | translate}}
                <mat-slider max="2" min="0.1" [step]="0.05" [(ngModel)]="item.card.zoom" (input)="onZoomChanged(item, $event)"
                    style="min-width: 80px" thumbLabel="true" (mousedown)="$event.stopPropagation()">
                </mat-slider>
                <button mat-icon-button (click)="onEditCard(item)" (mousedown)="$event.stopPropagation()">
                    <mat-icon>edit</mat-icon>
                </button>
                <button mat-icon-button (click)="onRemoveCard(item)" (mousedown)="$event.stopPropagation()">
                    <mat-icon>close</mat-icon>
                </button>
            </div>
        </gridster-item>
    </gridster>
</div>